<template>
	<view class="content">
		<el-button type="primary" icon="el-icon-plus" class="add" @click="updateChange('add')">新增</el-button>
		<view class="table" v-loading="loading">
			<el-table :data="tableData" border style="width: 100%" :header-cell-style="{'text-align':'center'}"
				:cell-style="{'text-align':'center'}">
				<el-table-column prop="name" label="名称" width="180">
				</el-table-column>
				<el-table-column prop="desc" label="描述">
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间">
					<template slot-scope="scope">
						{{scope.row.createTime | formatDateTwo}}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="updateChange('edit',scope.row)" type="success" plain>修改</el-button>
						<el-button @click="remove(scope.row._id)" type="danger" plain>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</view>

		<el-dialog title="新增类别" :visible.sync="addDialog" width="30%">
			<el-form label-width="100px" :model="form">
				<el-form-item label="名称">
					<el-input v-model="form.name" placeholder="输入名称"></el-input>
				</el-form-item>
				<el-form-item label="描述">
					<el-input v-model="form.desc" placeholder="输入描述"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialog = false">取 消</el-button>
				<el-button v-if="type == 'add'" type="primary" @click="addChange">确 定</el-button>
				<el-button v-if="type == 'edit'" type="primary" @click="update()">修 改</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	import {
		formatDate
	} from "../../../../until/index.js"
	export default {
		data() {
			return {
				form: {},
				loading: false,
				addDialog: false,
				tableData: [],
				pageIndex: 1,
				pageSize: 10,
				type: '',
				id: ''
			};
		},
		filters: {
			// 时间格式化
			formatDateTwo(time) {
				var date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		},
		created() {
			this.get()
		},
		methods: {
			updateChange(type, content) {
				if (type == 'edit') {
					this.type = 'edit'
					this.form = content
				} else {
					this.type = 'add'
				}
				this.addDialog = true
			},
			// 修改数据
			async update() {
				uni.showLoading({
					title: '处理中...'
				})
				return await uniCloud.callFunction({
					name: 'update',
					data: {
						tableName: 'blogs-type',
						id: this.form._id,
						name: this.form.name,
						desc: this.form.desc
					}
				}).then((res) => {
					uni.hideLoading()
					this.$notify({
						title: '提示',
						message: '修改成功',
						type: 'success'
					});
					this.addDialog = false
					return res.result.msg
				}).catch((err) => {
					uni.hideLoading()
					uni.showModal({
						content: `更新操作执行失败，错误信息为：${err.message}`,
						showCancel: false
					})
					console.error(err)
				})
			},
			remove(Id) {
				this.$confirm('是否删除?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(async () => {
						return await uniCloud.callFunction({
							name: 'remove',
							data: {
								tableName: 'blogs-type',
								id: Id
							}
						}).then((res) => {
							uni.hideLoading()
							this.$notify({
								title: '提示',
								message: '删除成功',
								type: 'success'
							});
							this.get()
							return res.result.msg
						}).catch((err) => {
							uni.hideLoading()
							this.$notify({
								title: '提示',
								message: '删除失败',
								type: 'success'
							});
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			},
			async get() {
				this.loading = true
				return await uniCloud.callFunction({
					name: 'get',
					data: {
						tableName: 'blogs-type',
						pageIndex: this.pageIndex, //第几页
						pageSize: this.pageSize //每页的记录条数
					}
				}).then(res => {
					this.tableData = res.result.data
					this.loading = false
					return res.result.data
				})
			},
			async addChange() {
				return await uniCloud.callFunction({
					name: 'add',
					data: {
						action: 'blogs-type',
						createTime: Date.now(),
						name: this.form.name,
						desc: this.form.desc
					}
				}).then((res) => {
					uni.hideLoading()
					this.$notify({
						title: '提示',
						message: '添加成功',
						type: 'success'
					});
					this.get()
					this.addDialog = false
					return res.result.id
				}).catch((err) => {
					uni.hideLoading()
					uni.showModal({
						content: `添加数据失败，错误信息为：${err.message}`,
						showCancel: false
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 40upx;

		.add {
			margin: 20upx 0;
		}
	}
</style>
